<template>
  <div>
    <template>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="日期" width="120">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120"></el-table-column>
        <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
        <el-button @click="toggleSelection()">取消选择</el-button>
      </div>
    </template>
  </div>
</template>
  </div>
</template>
<script>
import Api from "../api/shoppingCart";
export default {
  data() {
    return {
      ShoppingCartList: []
    };
  },
  created() {
    this.cart();
  },
  methods: {
    async cart() {
      let res = await Api.getShoppingCart({
        user_id: this.$store.state.user_id
      });
      this.ShoppingCartList = res.shoppingCartData;
      console.log(this.ShoppingCartList);
    }
  },
  handleSelectionChange(val) {
    this.multipleSelection = val;
  }
};
</script>
<style lang="scss" scoped>
.shop_main {
  width: 1225px;
  min-height: 400px;
  margin: 0 auto;
}
.el-table {
  margin: 30px 0;
  font-size: 18px;
}
.btn {
  width: 15px;
}
.shop_foot {
  height: 40px;
  background-color: white;
  margin-bottom: 30px;
  padding: 0;
}
.card_left {
  float: left;
}
.card_right {
  float: right;
}
.card_right > button {
  width: 100px;
  height: 40px;
}
</style>